<template>
  <div class="caseAnalysis1">
    <!-- <div class="caseAnalysis1_top"></div> -->
    <div class="caseAnalysis1_buttom">
        <ul class="caseAnalysis1_buttom1">
            <li class="caseAnalysis1_buttom11">案件类型最多的前三类</li>
            <li class="caseAnalysis1_buttom12">建议重点关注</li>
            <li v-for="(item,i) in caseAnalysis1_buttom3Arr" :key="i" class="caseAnalysis1_buttom1Item">
              <div class="buttom1Item1">{{item.name}}</div>
              <div class="buttom1Item2">
                <span><span :style="{color:item.color}">{{item.num}}</span>件</span>
                <span><span :style="{color:item.color}">{{item.percentage}}</span>占比</span>
              </div>
            </li>
        </ul>
        <ul class="caseAnalysis1_buttom3">
          <li class="caseAnalysis1_buttom11">案件中最多提到的词语前三类</li>
            <li class="caseAnalysis1_buttom12">建议重点关注</li>
            <li v-for="(item,i) in caseAnalysis1_buttom3Arr" :key="i" class="caseAnalysis1_buttom1Item">
              <div class="buttom1Item1">{{item.name}}</div>
              <div class="buttom1Item2">
                <span class="buttom1Item2_span"><span :style="{color:item.color}">{{item.num}}</span>件</span>
                <span class="buttom1Item2_span"><span :style="{color:item.color}">{{item.percentage}}</span>占比</span>
              </div>
            </li>
        </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      caseAnalysis1_buttom1Arr: [
        {
          name: "违法占道",
          num: 234,
          percentage: "42%",
          color:'#E95F6C',
        },
        {
          name: "噪音扰民",
          num: 134,
          percentage: "22%",
          color:'#B19033',
        },
        {
          name: "建筑垃圾",
          num: 98,
          percentage: "10%",
          color:'#3F98A8',
        }
      ],
      caseAnalysis1_buttom3Arr: [
        {
          name: "违法占道",
          num: 234,
          percentage: "42%",
          color:'#E95F6C',
        },
        {
          name: "噪音扰民",
          num: 134,
          percentage: "22%",
          color:'#B19033',
        },
        {
          name: "建筑垃圾",
          num: 98,
          percentage: "10%",
          color:'#3F98A8',
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.caseAnalysis1 {
  width: 600px;
  background: url("../../assets/dapin/3/1.png") #0e1525 no-repeat;
  color: #fff;
  padding-top: 20px;
  .caseAnalysis1_top {
    padding-left: 15px;
  }
  .caseAnalysis1_buttom {
    width: 600px;
    display: flex;
    padding-left: 15px;
    .caseAnalysis1_buttom1,
    .caseAnalysis1_buttom3 {
      .caseAnalysis1_buttom11 {
        font-size: 14px;
        margin-bottom: 8px;
      }
      .caseAnalysis1_buttom12 {
        height: 14px;
        margin-bottom: 8px;
        width: 76px;
        background: #c92e2a;
        font-size: 12px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    ul {
      list-style: none;
      padding-left: 0;
      width: 50%;
      .caseAnalysis1_buttom1Item {
        display: flex;
        margin-bottom: 5px;
        .buttom1Item1{
          margin-right: 5px;
        }
        .buttom1Item2{
          margin-right: 5px;
          .buttom1Item2_span{
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>